<template>
	<div class="bank-page">
		<Head navTitle="卡片管理"/>
		<div class="page-container ">
			<div class="m-bank-cells">
				<div class="bank-card" v-for="item in 3" :key="item">
					<div class="bank-head">
						<div class="txt">VietinBank</div>
						<div class="txt-sm">储蓄卡</div>
					</div>
					<div class="bank-val">**** **** **** 3423</div>
					<div class="ball-icon"></div>
				</div>
				<div class="bank-tip">温馨提示：最多绑定5张卡</div>
			</div>
			<div class="m-space"></div>
			<div class="m-fixed-foot">
				<el-button type="success" @click="bankVshow = true"><i class="el-icon-circle-plus-outline"></i> 添加银行卡</el-button>
			</div>
		</div>
		<!-- 添加银行卡 -->
		<van-popup v-model="bankVshow" position="bottom" round :style="{ height: '100%' }" closeable>
			<div class="pop-m-title">添加银行卡</div>
			<div class="bs-m-form">
				<el-form ref="bankform" :model="bankform" label-position="top">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="户名">
								<el-input v-model="bankform.uname" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="银行名称">
								<el-input v-model="bankform.bkname" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="银行账户">
								<el-input v-model="bankform.bkaccount" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="开卡行">
								<el-input v-model="bankform.khk" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="开户银行省">
								<el-input v-model="bankform.pro" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="开户银行市">
								<el-input v-model="bankform.city" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="备注">
								<el-input v-model="bankform.bz" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div class="dialog-lg-footer">
					<el-button type="success" @click="bankVshow = false">保 存</el-button>
					<el-button type="info" @click="bankVshow = false">取 消</el-button>
			</div>
			
		</van-popup>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				// 弹出
				bankVshow:false,
				bankform: {
					uname: '',
					bkname: '',
					bkaccount: '',
					khk: '',
					pro: '',
					city: '',
					bz: '',
				},
			};
		},
		methods: {
		}
	}
</script>
